<template>
  <div class="active">
    <div class="title">
      <h2>{{title}}</h2>
      <div>{{content}}</div>
    </div>
    <button class="close" @click="fnn">关闭</button>
  </div>
</template>

<script>
export default {
  props:['title','content'],
  methods:{
    fnn() {
      this.$emit('harry')
    }
    
  }
}
</script>

<style scoped>
.active {
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid #333;
  
  text-align: center;
  box-shadow: 1px 1px 0 red;
}
.close {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 30px;
  border-radius: 3px;

}
</style>